<template>
  <xr-create
    :loading="loading"
    :title="dialogTitle"
    @close="newHandleClose"
    @save="newDialogSubmit"
  >
    <el-form
      ref="dialogRef"
      :inline="true"
      :model="formInline"
      :rules="dialogRules"
      class="new-dialog-form"
      label-width="80px"
      label-position="top"
    >
      <el-form-item
        v-for="(item, index) in tableList"
        :label="item.value"
        :prop="item.field"
        :key="index"
        style="width: 50%"
      >
        <span slot="label">{{ item.value }}</span>
        <el-tooltip
          v-if="item.tips"
          slot="label"
          :content="item.tips"
          effect="dark"
          placement="top"
        >
          <i class="wukong wukong-help_tips" />
        </el-tooltip>
        <!-- 所属部门 -->
        <template v-if="item.type == 'dep_select'">
          <DepSelect
            @change="selectChange"
            :value="formInline[item.field]"
          ></DepSelect>
        </template>
        <!-- 管理部门 -->
        <template v-else-if="item.type == 'manage_select'">
          <manageDep
            @submitDeps="submitDeps"
            ref="manage_dep"
            :manageDeptId="manageDeptId"
            :manageDeptName="manageDeptName"
          ></manageDep>
        </template>
        <!-- 性别 -->
        <template v-else-if="item.type == 'select'">
          <el-select v-model="formInline[item.field]" filterable clearable>
            <el-option
              v-for="optionItem in optionsList[item.field].list"
              :key="optionItem.id"
              :label="optionItem.name"
              :value="optionItem.id"
            />
          </el-select>
        </template>
        <!-- 直属上级 -->
        <template v-else-if="item.type == 'higher_elect'">
          <UserSelect
            v-model="formInline[item.field]"
            @input="userChange"
          ></UserSelect>
        </template>
        <!-- 角色  -->
        <template v-else-if="item.type == 'selectCheckout'">
          <UserEmployeeSelect
            v-model="formInline[item.field]"
            @input="userEmployeeChange"
            multiple
          ></UserEmployeeSelect>
        </template>
        <!-- 是否启用  -->
        <template v-else-if="item.type == 'switch'">
          <el-switch
            v-model="formInline[item.field]"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>

        <el-input
          v-else
          v-model="formInline[item.field]"
          :maxlength="100"
          clearable
          :disabled="dialogTitle == '编辑员工' && item.field == 'username'"
        />
      </el-form-item>
    </el-form>
  </xr-create>
</template>
<script>
/**
 * 新增员工  编辑员工
 */
import XrCreate from "@/components/XrCreate";
import { chinaMobileRegex } from "@/utils";
import manageDep from "../../components/manageDep"; //部门选择器-多选
import DepSelect from "../../components/DepSelect"; //部门选择器-单选
import UserEmployeeSelect from "../../crm/components/UserEmployeeSelect"; //角色选择器
import UserSelect from "../../components/UserSelect"; //人员选择器-单选
export default {
  components: {
    XrCreate,
    manageDep,
    DepSelect,
    UserEmployeeSelect,
    UserSelect,
  },
  model: {
    prop: "formInline",
    event: "change",
  },
  props: [
    "dialogTitle",
    "loading",
    "formInline", //表单绑定数据
    "optionsList", //表单下拉选项
    "manageDeptId", //管理部门id
    "manageDeptName", //管理部门名称
    "deptName",
  ],
  data() {
    return {
      dialogRules: {
        realname: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,12}$/,
            message: "密码由6-12位字母、数字组成",
          },
        ],
        username: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: chinaMobileRegex,
            message: "目前只支持中国大陆的手机号码",
            trigger: "blur",
          },
        ],
        parentId: [
          { required: true, message: "直属上级不能为空", trigger: "change" },
        ],
        deptId: [
          { required: true, message: "部门不能为空", trigger: "change" },
        ],
        roleId: [{ required: true, message: "角色不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 部门-单选-确定
    selectChange(data) {
      console.log(data);
      this.$set(this.formInline, "deptId", data.deptId);
      // this.depName = data.name;
    },
    /**
     * 管理部门-确定
     */
    submitDeps(e) {
      this.$set(this.formInline, "manageDeptId", e);
    },
    /**
     * 提交弹框
     */
    newDialogSubmit() {
      this.$refs.dialogRef.validate((valid) => {
        if (valid) {
          this.$emit("newDialogSubmit");
        }
      });
    },
    /**
     * 关闭弹框
     */
    newHandleClose() {
      this.$emit("newHandleClose");
    },
    /**
     * 角色选择器变化
     */
    userEmployeeChange(data) {
      this.formInline["roleId"] = data;
    },
    /**
     * 直属上级-人员选择器变化
     */
    userChange(data) {
      this.formInline["parentId"] = data;
      console.log('执行赋值---------------')
      this.$refs.dialogRef.validateField('parentId')
    },
  },
  computed: {
    /**
     * 表单数据
     */
    tableList: function () {
      let listArr = [
        { field: "username", value: "手机号" },
        { field: "realname", value: "姓名" },
        { field: "sex", value: "性别", type: "select" },
        { field: "deptId", value: "所属部门", type: "dep_select" },
        { field: "parentId", value: "直属上级", type: "higher_elect" },
        { field: "roleId", value: "角色", type: "selectCheckout" },
        { field: "manageDeptId", value: "管理部门", type: "manage_select" },
        { field: "status", value: "是否启用", type: "switch" },
      ];
      if (this.dialogTitle == "新建员工") {
        listArr.splice(1, 0, { field: "password", value: "登录密码" });
      }
      return listArr;
    },
  },
};
</script>
<style scoped lang="scss">
/* 新建和编辑 */
.new-dialog-form {
  padding: 0 20px;
}
.new-dialog-form /deep/ .el-form-item__label {
  // line-height: 26px;
}
.new-dialog-form /deep/ .el-form-item {
  width: 50%;
  margin: 0;
  padding-bottom: 10px;
}
.new-dialog-form /deep/ .el-form-item .el-form-item__label {
  padding: 0;
}
.new-dialog-form {
  /deep/ .el-form-item:nth-child(even) {
    padding-left: 15px;
  }

  /deep/ .el-form-item:nth-child(odd) {
    padding-right: 15px;
  }
  /deep/ .el-select {
    width: 100%;
  }
}
.xr-create__footer {
  margin-top: 70px;
}
</style>